import React, { useContext, useState } from 'react';
import { Form, Input, Button } from 'antd';
import { ConfigContext } from '../../configProvider';
import './index.less';

interface LoginFormProps {
  onSubmit: (username: string, password: string) => void;
}

const LoginForm: React.FC<LoginFormProps> = ({ onSubmit }) => {
  const { prefix } = useContext(ConfigContext);
  const pf = prefix + '-login';

  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value);
  };

  const handlePasswordChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value);
  };

  const handleSubmit = (values: any) => {
    if (onSubmit) {
      onSubmit(username, password);
    }
  };

  return (
    <Form onFinish={handleSubmit} className={pf}>
      <Form.Item
        label="Username"
        className={`${pf}-username`}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Input placeholder="Username" value={username} onChange={handleUsernameChange} />
      </Form.Item>
      <Form.Item
        label="Password"
        className={`${pf}-password`}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Input.Password placeholder="Password" value={password} onChange={handlePasswordChange} />
      </Form.Item>
      <Form.Item className={`${pf}-submit`}>
        <Button type="primary" htmlType="submit" className={`${pf}-submit-button`}>
          Log in
        </Button>
      </Form.Item>
    </Form>
  );
};

export default LoginForm;
